---
const {
  title = await Astro.slots.render("default"),
  subtitle = await Astro.slots.render("subtitle"),
} = Astro.props;
---

<header class="mb-8 md:mb-16 text-center max-w-3xl mx-auto">
  <h1
    class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
    set:html={title}
  />
  {
    subtitle && (
      <div
        class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-slate-400 font-medium"
        set:html={subtitle}
      />
    )
  }
</header>
